<template>
  <div class="block-box">
    <div class="corner-lb"></div>
    <div class="corner-rb"></div>
    <h3 class="task-title">
      每日飞行里程<img class="icon" :src="getImageUrl('leftbg10.png')" alt="" />
    </h3>
    <div class="charts-box">
      <EchartsUI ref="chartRef" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { EchartsUIType } from "@vben/plugins/echarts";
import { onMounted, ref } from "vue";
import { EchartsUI, useEcharts } from "@vben/plugins/echarts";
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href;
};
const props = defineProps({ licheng: Array });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const calculateAverage = (arr) => {
  if (!Array.isArray(arr) || arr.length === 0) return 0; // 处理空数组或非数组
  const sum = arr.reduce((acc, val) => acc + val, 0);
  return (sum / arr.length).toFixed(2);
}
onMounted(() => {
  renderEcharts({
    title: {
      text: `平均值：${calculateAverage(props.licheng.map(item => item.distance))}m`,
      textStyle: {
        color: "#fff",
        fontSize: 14,
        fontWeight: "normal",
      },
      top: 0,
      right: '4%',
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      orient: "vertical",
      right: "0",
      top: "25%",
      padding: [20, 10],
      textStyle: {
        // 设置文字样式
        color: "#fff", // 🎯 这里设置字体颜色，比如红色
      },
    },
    // legend: {
    //   data: seriesNames.value,
    // },
    grid: {
      top: "10%",
      left: "5%",
      right: "5%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: props.licheng.map(item => item.date),
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          color: "#01494B",
        },
      },
      axisLabel: {
        color: "white",
        interval: 0,
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#01494B",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#01494B",
        },
      },
      axisLabel: {
        color: "#FFFFFF",
      },
    },
    series: [
      {
        data: props.licheng.map(item => item.distance),
        type: "line",
        smooth: true,
        lineStyle: {
          color: "#00DCEA",
          width: 2,
        },
        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "RGBA(23, 180, 190, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 220, 234, 0)",
              },
            ],
          },
        },
        // 如果需要设置数据点的颜色，也可以添加 itemStyle
        itemStyle: {
          color: "#00DCEA",
        },
      },
    ],
  });
});
</script>
<style lang="scss" scoped>
.block-box {
  margin: 0 0.5vh;
  height: 35vh;
  background: rgb(2 19 20 / 52%);
  border: 1px solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  &::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-lb {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-left: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-rb {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-right: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .task-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, "PingFang SC";
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(1, 34, 35, 0.2) 28%,
        rgba(7, 217, 221, 0.7) 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }

  .charts-box {
    height: 31vh;
    width: 100%;
  }
}
</style>
